<template>
  <div class="orders">
    <div class="navigation">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>订单管理</el-breadcrumb-item>
        <el-breadcrumb-item>订单列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <el-card class="box-card">
      <div class="top">
        <div class="search-content">
          <el-input
            placeholder="请输内容"
            v-model="query"
            clearable
            @clear="getOrderData"
          ></el-input>
          <!-- <el-input placeholder="请输入内容" v-model="input2"></el-input> -->
          <el-button
            class="search-icon"
            type="primary"
            icon="el-icon-search"
            @click="getOrderData"
          ></el-button>
        </div>
      </div>

      <template>
        <el-table :data="orderList.goods" border style="width: 100%">
          <el-table-column type="index" width="60"></el-table-column>
          <el-table-column prop="order_number" label="订单标号" width="215">
          </el-table-column>
          <el-table-column prop="order_price" label="订单价格" width="95">
          </el-table-column>
          <el-table-column prop="pay_status" label="是否付款" width="100">
            <template slot-scope="scope">
              <el-tag type="danger" v-if="scope.row.pay_status === '0'"
                >未付款</el-tag
              >
              <el-tag type="success" v-else>已付款</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="is_send"
            label="是否发货"
            width="95"
          ></el-table-column>
          <el-table-column prop="create_time" label="下单时间" width="180">
            <template slot-scope="scope">
              {{ scope.row.create_time | formatDate("yyyy-MM-dd hh:mm:ss") }}
            </template>
          </el-table-column>

          <el-table-column label="操作" width="160">
            <template slot-scope="scope">
              <el-row class="el-row">
                <div class="bottomTip">
                  <el-tooltip
                    class="tip"
                    effect="dark"
                    placement="bottom"
                    :enterable="false"
                  >
                    <div slot="content">编辑</div>
                    <el-button
                      type="primary"
                      icon="el-icon-edit"
                      size="small"
                      @click="showEditDialog(scope.row.order_id)"
                    ></el-button>
                  </el-tooltip>
                </div>

                <div class="bottomTip">
                  <el-tooltip
                    class="tip"
                    effect="dark"
                    content="物流"
                    placement="bottom"
                    :enterable="false"
                  >
                    <el-button
                      type="success"
                      icon="el-icon-location"
                      size="small"
                      @click="showWuliuDialog(scope.row.order_id)"
                    ></el-button>
                  </el-tooltip>
                </div>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
      </template>

      <div class="bottom">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="orderList.pageNum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="orderList.total"
        >
        </el-pagination>
      </div>
    </el-card>

    <!-- 编辑对话框 -->
    <el-dialog
      title="修改地址"
      :visible.sync="editVisible"
      width="60%"
      @close="closeEditDialog"
    >
      <el-form
        :model="editAddressForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
      >
        <el-form-item label="省市区/县" prop="address1">
          <!-- <el-input v-model="ruleForm.address1"></el-input> -->
          <el-cascader :options="cityData" v-model="editAddressForm.address1">
          </el-cascader>
        </el-form-item>
        <el-form-item label="详细地址" prop="address2">
          <el-input v-model="editAddressForm.address2"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="editOrder">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 物流进度对话框 -->
    <el-dialog
      title="物流进度"
      :visible.sync="wuliuDialog"
      width="60%"
    >
      <el-timeline :reverse="reverse">
        <el-timeline-item
          v-for="(item, index) in wuliuData"
          :key="index"
          :timestamp="item.time"
        >
          {{ item.context }}
        </el-timeline-item>
      </el-timeline>
    </el-dialog>
  </div>
</template>

<script>
import cityData from "../city_data_element.js";
import wuliuData from "../wuliu.js"

export default {
  name: "Orders",
  data() {
    return {
      searchInput: "",
      // 当前页面
      pageNum: 1,
      // 每页显示多少条数据
      pagesize: 5,
      // 数据总数
      total: 0,

      // 订单列表数据
      orderList: [],

      // 是否显示编辑对话框
      editVisible: false,

      // 订单ID
      oderId: "",

      editAddressForm: {
        address1: "",
        address2: "",
      },
      rules: {
        address1: [
          {
            required: true,
            message: "请选择省市区/县",
            trigger: "blur",
          },
        ],
        address2: [
          {
            required: true,
            message: "请输入详细地址",
            trigger: "blur",
          },
        ],
      },

      // 城市数据
      cityData,

      // 是否显示物流进度对话框
      wuliuDialog: false,

      // 查询参数
      query:'',

      // 物流数据倒序显示
      reverse: false,
      // 物流数据
      wuliuData
    };
  },
  created() {
    this.getOrderData();

  },
  methods: {
    // 获取订单数据
    getOrderData() {
      this.axios({
        method: "get",
        url: "orders",
        params: {
          query: this.query,
          pagenum: this.pageNum,
          pagesize: this.pagesize,
        },
      })
        .then((res) => {
          
          if (res.data.meta.status == 200) {
            this.orderList = res.data.data;
          }
        })
        .catch((err) => {
          
        });
    },

    // 底部页面选择
    handleSizeChange(val) {
      // 每页选择显示几条数据
      this.pagesize = val;
      this.getOrderData();
    },
    handleCurrentChange(val) {
      // 当前页
      this.pageNum = val;
      this.getOrderData();
    },

    // 展示修改订单的对话框
    showEditDialog(order_id) {
      this.editVisible = true;

      
      this.orderId = order_id;
    },

    editOrder(){
      this.$refs.ruleForm.validate((valid) => {
          // 

        if (valid) {
          this.$message.success("修改地址成功！");
          this.editVisible = false;
        } else {
          
          return false;
        }
      });
   
    },

    // 关闭编辑对话框
    closeEditDialog() {
      // 
      this.$refs.ruleForm.resetFields();
    },

    // 显示物流进度对话框
    showWuliuDialog(){
      this.wuliuDialog = true;
      // this.getWuliuData();
    },

    // 获取物流信息
    getWuliuData(){
      this.axios({
        method:'get',
        // url:'/kuaidi/:id',
        url:'/kuaidi/1106975712662',
      }).then(res=>{
        
        if(res.data.meta.status == 200){
          this.$message.success('获取物流进度成功！');
        }else{
          this.$message.error('获取物流进度失败！');
          return;
        }
      }).catch(err=>{
        
      })
    },

  },
};
</script>

<style lang="less" scoped>
.orders {
  margin-top: 100px;
  // margin-left: 200px;
}
.box-card {
  margin-top: 22px;
  .top {
    // border: 1px solid #000;
    display: flex;
    margin-bottom: 16px;
    .search-content {
      display: flex;
    }
    /deep/ .el-input__inner {
      // border: 1px solid #000;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      outline: none;
      width: 400px;
    }
    /deep/ .search-icon {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      background-color: #ccc;
      border-color: #ccc;
    }
  }
  .bottom {
    margin-top: 15px;
  }
  .el-row {
    // border: 1px solid #000;
    display: flex;
    .bottomTip {
      margin-right: 10px;
    }
  }
}
.el-table {
  font-size: 12px;
  color: #666;
}
.el-cascader {
  width: 100%;
}
</style>

// 192.168.206.2
// 192.168.137.1